<template>
	<view class="body">
		<scroll-view scroll-y="true" :scroll-top="scrollTop" @scrolltolower="loadMore" @scrolltoupper="refresh"
			scroll-with-animation="true" class="scroll-view">
			<view style="margin: 10px">
				<u-button @click="show = true">
					<image :src="$IMAGE_BASE_URL + '/img/new/rili.png'" style="float:left;width: 39rpx; height: 41rpx;margin-right: 20rpx;">
					</image>
					自{{$u.timeFormat(startTime, 'yyyy年mm月dd日')}}到{{$u.timeFormat(endTime, 'yyyy年mm月dd日')}}
				</u-button>
				<u-calendar v-model="show" :mode="mode" @change="change"></u-calendar>
			</view>
			<view class="shencheng">生成报告</view>
			<view class="neirong">
				<view class="title">
					<image :src="$IMAGE_BASE_URL + '/img/new/xinlv.png'"
						style="float:left;width: 54rpx; height: 54rpx;margin-left: 20rpx; margin-top: 10rpx;">
					</image>
					<text style="padding-left: 20rpx;font-size: 30rpx;line-height: 54rpx;">心率报告</text>
					<view class="chooseMonth">
						<picker mode="date" :value="$u.timeFormat(endTime, 'yyyy-mm-dd')" :start="startDate" :end="endDate"
							@change="bindDateChange" fields="month">
							{{$u.timeFormat(endTime, 'yyyy-mm')}}<u-icon style="margin-left: 10rpx;" name="arrow-down" color="#a7a7a7" size="28"></u-icon>
						</picker>
					</view>
				</view>
				
				<view class="info">
					
					
					<view class="container">
						<!-- 下拉刷新容器 -->
						<!-- 刷新状态提示 -->
						<view v-if="refreshing" class="refreshing">正在刷新...</view>
					
						<view class="list" v-if='items.length > 0' v-for="(item, index) in items" :key="index">
							<view class="time">
								{{$u.timeFormat(item.startTime*1, 'yyyy-mm-dd')}}至{{$u.timeFormat(item.endTime*1, 'yyyy-mm-dd')}}报告
								<view style="font-size: 24rpx;color: #a0a0a0;">生成时间：{{$u.timeFormat(item.reportTime*1, 'yyyy-mm-dd hh:MM:ss')}}</view>
							</view>
							<image :src="$IMAGE_BASE_URL + '/img/new/chakan.png'"
								style="float:right;width: 67rpx; height: 67rpx;margin-right: 20rpx;">
							</image>
						</view>
						<!-- <view class="list" v-if='items.length == 0&&!refreshing'>
							<view  class="no-more-data">暂无数据</view>
						</view> -->
						<!-- 加载状态提示 -->
						<view v-if="loading" class="loading">加载中...</view>
						<!-- 无更多数据提示 -->
						<view v-if="noMoreData" class="no-more-data">没有更多数据</view>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import {
		getCurrentPage
	} from '@/core/app'
	import CacheConfig from "@/config/CacheConfig";
	import {
		device
	} from "@/api/login/index.js";
	import {
		historyPropert,
		hrvReport
	} from "@/api/device/index.js";
	import StorageUtils from "@/utils/StorageUtils";
	export default {
		computed: {
			startDate() {
				return this.getDate('start');
			},
			endDate() {
				return this.getDate('end');
			}
		},
		data() {
			return {
				iotDeviceId: '',
				show: false,
				mode: 'range',
				startTime: Date.parse(new Date(new Date().getTime() - 30 * 24 * 60 * 60 * 1000)),
				endTime: Date.parse(new Date()),
				items: [], // 列表数据
				refreshing: false, // 是否正在刷新
				loading: false, // 是否正在加载更多
				noMoreData: false, // 是否没有更多数据
				page: 0, // 当前页码
				scrollTop: 0, // 滚动条位置，用于重置滚动位置到顶部
			};
		},
		onReady() {
			this.iotDeviceId = getCurrentPage().query.iotDeviceId;
			// this.gethistoryPropert(this.iotDeviceId);
		},
		onLoad() {
			this.loadData(); // 页面加载时获取初始数据
		},
		methods: {
			change(e) {
				this.startTime = Date.parse(new Date(e.startDate.replace(/-/g, '/')));
				this.endTime = Date.parse(new Date(e.endDate.replace(/-/g, '/')));
				// this.gethistoryPropert(this.iotDeviceId);
				this.loadData(true)
			},
			bindDateChange: function(e) {
				let date = e.detail.value.split('-')
				// date[0], date[1], date[2] 年月日
				this.startTime = new Date(date[0] * 1, date[1] * 1 - 1, 1, 0, 0, 0, 0).getTime();
				this.endTime = new Date(date[0] * 1, date[1] * 1, 0, 23, 59, 59, 999).getTime();
			},
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();
				if (type === 'start') {
					year = year - 60;
				} else if (type === 'end') {
					year = year + 2;
				}
				month = month > 9 ? month : '0' + month;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}-${day}`;
			},
			loadData(refresh = false) {
				if(refresh){
					this.noMoreData=false
				}
				if (this.refreshing || this.loading ||this.noMoreData) return;
				let isRefresh = refresh;
				if (refresh) {
					this.refreshing = true;
					this.page = 1; // 刷新时重置页码为1
					this.items = []; // 清空列表数据
				} else {
					this.loading = true;
					this.page += 1; // 加载更多时页码加1
				}
				hrvReport({
					uuid:StorageUtils.get('uuid'),
					startTime: this.startTime,
					endTime: this.endTime,
					current: this.page,
					size: 10,
				}).then(res => {
					res = res.obj
					let data = []
					res.records.map(val => {
						data.push(val)
					})
					if (data) {
						if (isRefresh) {
							this.items = data;
						} else {
							this.items = [...this.items, ...data];
						}
					} else {
						this.noMoreData = true;
					}
					if(this.page >= res.pages){
						this.noMoreData = true;
					}
					if (isRefresh) {
						this.refreshing = false;
						this.scrollTop = 0; // 刷新成功后重置滚动位置到顶部（如果需要）
					} else {
						this.loading = false;
					}
				}).catch(error => {
					console.log(error);
					uni.showToast({
						title: '加载失败',
						icon: 'none',
					});
				});
			},
			// 下拉刷新
			refresh() {
				this.loadData(true);
			},
			// 上拉加载更多
			loadMore() {
				this.loadData();
			},
			gethistoryPropert(deviceId) {

			},
		}
	};
</script>
<style lang="scss">
	.body {
		min-height: 100vh;
		background-color: #f2f2f2;
		.container {
			// padding: 20px;
		}
	
		.scroll-view {
			height: 100vh;
			/* 或者其他你需要的高度 */
			overflow: hidden;
		}
	
		.item {
			padding: 10px;
			border-bottom: 1px solid #eee;
		}
	
		.refreshing,
		.loading {
			text-align: center;
			padding: 20px;
		}
	
		.no-more-data {
			text-align: center;
			padding: 20px;
			color: #999;
		}
	
		.title {
			font-size: 36rpx;
			line-height: 76rpx;
		}
	
		.info {
			margin-bottom: 10px;
			background-color: #fff;
			padding: 30rpx;
			border-radius: 30rpx;
			overflow: hidden;
			position: relative;
			font-size: 36rpx;
	
			.state2 {
				width: 72rpx;
				height: 36rpx;
				line-height: 36rpx;
				border-radius: 6rpx;
				position: absolute;
				top: 110rpx;
				right: 35rpx;
				font-size: 24rpx;
				color: #fff;
				text-align: center;
			}
	
			.data {
				font-size: 82rpx;
				font-weight: bold;
				line-height: 150rpx;
				float: left;
	
				text {
					padding-left: 10rpx;
					font-size: 26rpx;
				}
			}
	
			.data2 {
				font-size: 82rpx;
				font-weight: bold;
				line-height: 110rpx;
				text-align: center;
	
				text {
					padding-left: 10rpx;
					font-size: 26rpx;
				}
			}
	
			.fanwei {
				width: 100rpx;
				text-align: center;
				float: right;
				line-height: 36rpx;
				font-size: 36rpx;
	
				.danwei {
					font-size: 15.4rpx;
					color: #a0a0a0;
				}
			}
	
			.list {
				overflow: hidden;
				border-bottom: #f7f7f8 10rpx solid;
				padding-top: 30rpx;
				position: relative;
	
				.time {
					// display: flex;
					line-height: 60rpx;
					color: #2b2a2e;
					font-size: 36rpx;
					float: left;
				}
			}
	
			.list:first-child {
				padding-top: 0;
	
				.state2 {
					top: 80rpx;
				}
			}
	
			.list:last-child {
				border: none;
			}
		}
	
		.yuan {
			height: 30rpx;
			width: 30rpx;
			border-radius: 50%;
		}
	
		.lv {
			background-color: #0cd10f;
			margin-right: 10rpx;
		}
	
		.red {
			background-color: #ff2727;
		}
	
		.lvcolor {
			color: #0cd10f !important;
		}
	
		.chengcolor {
			color: #ffa126 !important;
		}
	
		.zi {
			background-color: #9270ff;
			margin-right: 10rpx;
		}
	}

	.shencheng {
		margin-left: auto;
		background: #0dd30c;
		width: 200rpx;
		line-height: 60rpx;
		color: #fff;
		border-radius: 15rpx;
		margin-right: 20rpx;
		text-align: center;
	}
	.chooseMonth{
		background-color: #fff;
		line-height: 64rpx;
		width: 200rpx;
		text-align: center;
		float: right;
		border-radius: 32rpx;
		font-size: 30rpx;
	}
	.neirong{
		background-color: #f2f2f2;
		padding: 20rpx 30rpx 30rpx;
		border-top: 20rpx solid #fff;
		margin-top: 20rpx;
		overflow: hidden;
	}
</style>